import { Component, Vue } from 'vue-facing-decorator'
import Render from './Render'
import type { JSX } from 'vue/jsx-runtime'
import { Tabs } from 'ant-design-vue'
import styled from 'vue3-styled-components'

@Component
export default class TabsRender extends Render {
    activeName = ''
    tabs = {} as {
        [key: string]: {
            title: string
            component: any | (() => any)
        }
    }

    tabsElement: typeof Tabs = styled(Tabs)`
        .ant-tabs-nav-wrap {
            padding: 4px 20px 0 20px;
        }
    `

    onMounted() {
        const query = this.$route.query
        if (query.key) {
            this.activeName = query.key as string
        } else {
            this.activeName = Object.keys(this.tabs)[0]
        }
    }

    render() {
        return <this.tabsElement v-model:activeKey={this.activeName}>
            { Object.keys(this.tabs).map((key) => {
                return <Tabs.TabPane key={key} tab={this.tabs[key].title}>
                    { typeof this.tabs[key].component === 'function' ? this.tabs[key].component() : this.tabs[key].component }
                </Tabs.TabPane>
            }) }
        </this.tabsElement>
    }
}